<template>
    <ul :class="{'error':item.isError==1?true:false}">
        <el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <li>
                        <div style="margin: 20px 0;">{{ $t('common.payMethod') }}</div>
                        <div>
                            <el-select v-model="item.code" placeholder="请选择" @change="changeChannel">
                                <el-option v-for="channel in channelCodeList" :key="channel.channelCode" :label="channel.name"
                                    :value="channel.channelCode">
                                </el-option>
                            </el-select>
                        </div>
                    </li>
                </el-col>
                <el-col :span="4">
                    <li>
                        <div style="margin: 20px 0;">{{ $t('common.payChannel') }}</div>
                        <div>
                            <el-select v-model="item.companyCode" placeholder="请选择">
                                <el-option 
                                    v-for="company in companyData" 
                                    :key="company.companyCode" 
                                    :label="company.name"
                                    :value="company.companyCode">
                                </el-option>
                            </el-select>
                        </div>
                    </li>
                </el-col>
                <el-col :span="2">
                    <div style="margin: 20px 0;">是否全选</div>
                    <el-switch
                        v-model="isSelectAll"
                        :active-value="true"
                        :inactive-value="false"
                        @change="selectAllApp"
                        >
                    </el-switch>
                </el-col>
                <el-col :span="9">
                    <li>
                        <div style="margin: 20px 0;">APP</div>
                        <div>
                            <el-select v-model="item.appNameList" multiple placeholder="请选择" style="width: 100%;">
                                <el-option
                                v-for="app in appList"
                                :key="app.id"
                                :label="app.name"
                                :value="app.name">
                                </el-option>
                            </el-select>
                        </div>
                    </li>
                </el-col>
                <el-col :span="3">
                    <li>
                        <div style="margin: 20px 0;">{{$t('common.status')}}</div>
                        <div>
                            <el-switch
                                v-model="item.isUse"
                                :active-value="0"
                                :inactive-value="1"
                            >
                        </el-switch>
                        </div>
                    </li>
                </el-col>
                <el-col :span='1'>
                    <div style="margin: 20px 0;height: 21px;"></div>
                    <el-button @click="delate"  icon="el-icon-delete"></el-button>
                </el-col>
            </el-row>
        </el-row>
        <div v-if="item.ErrMsg" style="color: red;padding: 10px 0;">支付渠道与支付方式重复</div>

    </ul>
</template>
<script>
import SelectAppList from '@/components/select-app-list';

export default {
    props: {
        item: {},
        channelCodeList:{
            default:[]
        },
        appList:{
            default:[]
        },
        index:null
    },
    data(){
        return {
            companyData:[],
            // item : {
            //     code:null,
            //     companyCode:null,
            //     appNameList:[],
            //     isUse: null
            // }
        }
    },
    methods:{
        selectAllApp(e){
            console.warn(e)
            if(e){
                this.item.appNameList = this.appList.map(item => item.name)
            }else{
                this.item.appNameList = []
            }
        },
        delate(){
            this.$emit('delate',this.index)
        },
        changeChannel(e){
            console.warn(e)
            let params = {
                payType:1,
                channelCode:e
            }; 
            this.item.companyCode=null
            this.getCompanyCodList(params)
        },
         getCompanyCodList(params){
            
            // if(payType === 0 && code) params.code = code;
            this.$api.finance.productSetting.getCompanyCodeList(params).then((res) => {
                const {status, data, error} = res;
                if ('1' === status && error === '00000000' && data) {
                    this.companyData = data;
                    // if(payType === 0) this.dialogVisible = true;
                    // if(payType === 1) this.isVisibleRepayDialog = true;
                }
            });
        }
    },
    created(){
        
        // this.item = {
        //     code:this.item.code,
        //     companyCode :this.item.companyCode,
        //     appNameList:this.item.appNameList,
        //     isUse: this.item.isUse
        // }
        
        let params = {
            payType:1,
            channelCode:this.item.code
        }; 
        if (params.channelCode){
            this.getCompanyCodList(params)
        }
        console.warn(this.item)
    }
}
</script>
<style lang="scss">
.error{
    li{
        div:nth-child(2){
            .el-input__inner{
                border-color:red;
                // color: red;
            }
        }
    }
}
</style>